<template>
  <div id="app" class="app">
    <router-view />
    <!-- 底部导航栏 -->
    <!-- <Tabbar :tabbarData="tabbarData" :link="link" ></Tabbar> -->
    <FooterBar :loginRoute="loginRoute"></FooterBar>
  </div>
</template>
<script>
import FooterBar from './components/FooterBar'
import Tabbar from "./components/Tabbar";
export default {
  components: {
    Tabbar,
    FooterBar,
  },
  data() {
    return {
      loginRoute:"login",
      tabbarData: [
          {
            id: "home",
            text: "自如",
          },

          {
            id: "Renting",
            text: "租房",
          },
          {
            id: "community",
            text: "浪迹",
          },
          {
            id: "message",
            text: "消息",
          },
          {
            id: "login",
            text: "我的",
          },
        ],
    };
  },
  methods: {
    // 底部导航按钮跳转路由的函数
    link(select) {
      if (this.$route.path.slice(1) !== select) {
        this.$router.push({ name: `${select}` });
      }
    },
   

    // 识别登录状态并进行相应操作
    setLoginState() {
      if (this.$store.state.dataUser) {
        // console.log("已登录状态");
        this.loginRoute = "user";
      } else {
        this.loginRoute = "login";
        // console.log("未登录状态");
      }
    },

    // 登录后将从浏览器拿过来的用户数据赋值给vuex中的用户数据
    setUserData() {
      if (sessionStorage.resultData) {
        // 需要进行格式转换再赋值
        var obj = JSON.parse(sessionStorage.getItem("resultData"));
        // 注意：该处该使用mutations修改值!
        this.$store.state.dataUser = obj;
      }
    },

    // 底部导航跳转页面的函数
  },
  updated() {
    // 每次更新时需要检查登录状态
    this.setLoginState();
    //  每次更新都获取最新用户信息：待优化：只有用户信息改变时再重新赋值
    this.setUserData();
  },
  mounted() {
    // 初次挂载时便检测登录状态
    this.setLoginState();
  },
  created() {
    // 该操作在挂载时太晚，容易影响检查登录状态的判断，所以移到了创建阶段
    this.setUserData();
  },
};
</script>
<style>
@import url(../public/css/app.css);
.app .footerbar {
  position: fixed;
  bottom: 0;
}
</style>
